<!doctype html>
<html lang="en">
<!--[if IE 9 ]>
<html  lang="en" class="ie9">
<![endif]-->
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<meta name="format-detection" content="telephone=no">
	<meta charset="UTF-8">
	<title>观察点KPI</title>
	<!-- CSS -->
	<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" href="css/animate.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/form.css">
	<link rel="stylesheet" href="customcss/style.css">
	<link rel="stylesheet" href="css/icons.css">
	<link rel="stylesheet" href="css/generics.css">
	<link rel="stylesheet" href="css/bootstrap/bootstrap-table.css">
	<link rel="stylesheet" href="customcss/bootstrap-table-self.css">
<!--	<link rel="stylesheet" href="css/jedate/jedate.css">-->
	<style>
		.linedraw {
			background: rgba(0, 0, 0, 0.22);
		}
	</style>
</head>
<body>
	<header id="header" class="navbar navbar-fixed-top">
		<a href="" id="menu-toggle"></a>
		<a class="logo pull-left" 	href="index.html">
			<img src="images/logo.png" alt="logo">
		</a>
		<div class="media-body">
			<div class="media" id="top-menu">
				<div class="pull-left tm-icon">
					<a data-drawer="messages" class="drawer-toggle" href="">
						<i class="sa-top-message"></i>
						<span>时间回溯</span>
					</a>
				</div>
				<div class="pull-left tm-icon">
					<a data-drawer="notifications" class="drawer-toggle" href="">
						<i class="sa-top-updates"></i>
						<span>帮助</span>
					</a>
				</div>
				<div id="time" class="pull-right">
					<span id="hours"></span> : <span id="min"></span> : <span id="sec"></span>
				</div>
				<div class="media-body">
					<input type="text" class="main-search">
				</div>
			</div>
		</div>
	</header>
	<section id="main" class="container">
		<!-- Sidebar -->
		<aside id="sidebar" class="navbar navbar-fixed-top">
			<!-- Side Menu -->
			<ul class="list-unstyled side-menu">
				<li>
					<a class="sa-side-home" href="index.html">
						<span class="menu-item">首页</span>
					</a>
				</li>
			</ul>
		</aside>
		<!-- Content -->
		<section id="content" class="container">
			<!-- Messages Drawer时间回溯 -->
			<div id="messages" class="tile drawer animated">
				<div class="listview narrow">
					<div class="media">
						<a href="">时间回溯</a> <span class="drawer-close">&times;</span>
					</div>
					<div class="overflow" style="height: 254px">
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/1.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Nadin Jackson - 2 Hours ago</small><br>
								<a class="t-overflow" href="">Mauris consectetur urna nec
									tempor adipiscing. Proin sit amet nisi ligula. Sed eu
									adipiscing lectus</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/2.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">David Villa - 5 Hours ago</small><br>
								<a class="t-overflow" href="">Suspendisse in purus ut nibh
									placerat Cras pulvinar euismod nunc quis gravida. Suspendisse
									pharetra</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/3.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Harris worgon - On 15/12/2013</small><br>
								<a class="t-overflow" href="">Maecenas venenatis enim
									condimentum ultrices fringilla. Nulla eget libero rhoncus,
									bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar,
									ornare turpis id</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/4.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Mitch Bradberry - On
									14/12/2013</small><br> <a class="t-overflow" href="">Phasellus
									interdum felis enim, eu bibendum ipsum tristique vitae.
									Phasellus feugiat massa orci, sed viverra felis aliquet quis.
									Curabitur vel blandit odio. Vestibulum sagittis quis sem sit
									amet tristique.</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/1.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Nadin Jackson - On 15/12/2013</small><br>
								<a class="t-overflow" href="">Ipsum wintoo consectetur urna
									nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu
									adipiscing lectus</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/2.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">David Villa - On 16/12/2013</small><br>
								<a class="t-overflow" href="">Suspendisse in purus ut nibh
									placerat Cras pulvinar euismod nunc quis gravida. Suspendisse
									pharetra</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/3.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Harris worgon - On 17/12/2013</small><br>
								<a class="t-overflow" href="">Maecenas venenatis enim
									condimentum ultrices fringilla. Nulla eget libero rhoncus,
									bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar,
									ornare turpis id</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/4.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Mitch Bradberry - On
									18/12/2013</small><br> <a class="t-overflow" href="">Phasellus
									interdum felis enim, eu bibendum ipsum tristique vitae.
									Phasellus feugiat massa orci, sed viverra felis aliquet quis.
									Curabitur vel blandit odio. Vestibulum sagittis quis sem sit
									amet tristique.</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/5.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Wendy Mitchell - On 19/12/2013</small><br>
								<a class="t-overflow" href="">Integer a eros dapibus,
									vehicula quam accumsan, tincidunt purus</a>
							</div>
						</div>
					</div>
					<div class="media text-center whiter l-100">
						<a href=""><small>VIEW ALL</small></a>
					</div>
				</div>
			</div>
			<!-- Notification Drawer帮助 -->
			<div id="notifications" class="tile drawer animated">
				<div class="listview narrow">
					<div class="media">
						<a href="">帮助</a> <span class="drawer-close">&times;</span>
					</div>
					<div class="overflow" style="height: 254px">
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/1.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Nadin Jackson - 2 Hours ago</small><br>
								<a class="t-overflow" href="">Mauris consectetur urna nec
									tempor adipiscing. Proin sit amet nisi ligula. Sed eu
									adipiscing lectus</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/2.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">David Villa - 5 Hours ago</small><br>
								<a class="t-overflow" href="">Suspendisse in purus ut nibh
									placerat Cras pulvinar euismod nunc quis gravida. Suspendisse
									pharetra</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/3.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Harris worgon - On 15/12/2013</small><br>
								<a class="t-overflow" href="">Maecenas venenatis enim
									condimentum ultrices fringilla. Nulla eget libero rhoncus,
									bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar,
									ornare turpis id</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/4.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Mitch Bradberry - On
									14/12/2013</small><br> <a class="t-overflow" href="">Phasellus
									interdum felis enim, eu bibendum ipsum tristique vitae.
									Phasellus feugiat massa orci, sed viverra felis aliquet quis.
									Curabitur vel blandit odio. Vestibulum sagittis quis sem sit
									amet tristique.</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/1.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">Nadin Jackson - On 15/12/2013</small><br>
								<a class="t-overflow" href="">Ipsum wintoo consectetur urna
									nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu
									adipiscing lectus</a>
							</div>
						</div>
						<div class="media">
							<div class="pull-left">
								<img width="40" src="img/profile-pics/2.jpg" alt="">
							</div>
							<div class="media-body">
								<small class="text-muted">David Villa - On 16/12/2013</small><br>
								<a class="t-overflow" href="">Suspendisse in purus ut nibh
									placerat Cras pulvinar euismod nunc quis gravida. Suspendisse
									pharetra</a>
							</div>
						</div>
					</div>
					<div class="media text-center whiter l-100">
						<a href=""><small>VIEW ALL</small></a>
					</div>
				</div>
			</div>
			<!-- Breadcrumb -->
			<div class="block-area">
				<div class="table-responsive overflow tableMinH">
					<span class="block-title blockHead cursor">
						观察点KPI
						<!--<i class="glyphicon glyphicon-arrow-down"></i>-->
						<i class="glyphicon glyphicon-minus"></i>
					</span>
					<div class="togglebox">
						<table id="table7">
						</table>
					</div>
				</div>
				<div class="table-responsive overflow tableMinH">
					<span class="block-title blockHead cursor">
						用户端KPI
						<i class="glyphicon glyphicon-minus"></i>
					</span>
					<div class="togglebox">
						<table id="userSidekpi"></table>
					</div>
				</div>
				<div class="table-responsive overflow tableMinH">
					<span class="block-title blockHead cursor">服务端KPI
						<i class="glyphicon glyphicon-minus"></i>
					</span>
					<div class="togglebox">
						<table id="serverSidekpi"></table>
					</div>
				</div>
			</div>
			<div class="block-area">
				<div class="drawpos" style="margin-left:-10px;margin-right: -10px;">
					<div class="pointline">


						<div class="modal fade in" id="addNew-event" tabindex="-1"
							role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content" style="background: #000;">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal"
											aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="myModalLabel">选择日期</h4>
									</div>
									<div class="modal-body">
										<div class="form-horizontal">
											<div class="form-group">
												<label for="historyTime" class="col-md-2 control-label">
													历史时间段: </label>
												<div class="col-md-9">
													<select class="form-control" id="historyTime"
														style="background: rgba(0, 0, 0, 0.0);">
														<option>10分钟</option>
														<option>30分钟</option>
														<option>1小时</option>
														<option>2小时</option>
														<option>4小时</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<lable for="lineTimejg" class="col-md-2 control-label">线图点间隔:</lable>
												<div class="col-md-9">
													<select class="form-control" id="lineTimejg"
														style="background: rgba(0, 0, 0, 0.0);">
														<option>10秒</option>
														<option>1分钟</option>
														<option>10分钟</option>
														<option>1小时</option>
														<option>1天</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<lable class="col-md-2 control-label">开始时间:</lable>
												<div class="col-md-9">
													<input type="text"
														class="form-control input-sm workinput wicon"
														id="modalStarTime" readonly>
												</div>
											</div>
											<div class="form-group">
												<lable class="col-md-2 control-label">结束时间:</lable>
												<div class="col-md-9">
													<input type="text" class="form-control input-sm"
														id="modalEndtime" readonly>
												</div>
											</div>
										</div>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default"
											data-dismiss="modal">关闭</button>
										<button type="button" class="btn btn-primary"
											data-dismiss="modal" id="subTimemodal"
											style="margin-right: 40px;">提交更改</button>
									</div>
								</div>
							</div>
						</div>


					</div>
					<div class="col-md-6">

						<div class="linedraw" onselectstart="return false;" style="user-select:none;height: 32.2rem; position: relative;margin-left: 2px;margin-right:3px;margin-top:10px;">
							<img src="../images/append.png" style="padding-top: 8em;"
								id="list-draw" class="center-block" data-toggle="modal"
								data-target="#listDraw">

							<div class="modal fade" id="listDraw" tabindex="-1" role="dialog"
								aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-hidden="true">&times;</button>
											<h4 class="modal-title" id="myModalLabel2">绘图列表</h4>
										</div>
										<div class="modal-body" style="padding: 0px;">
											<div class="list-content"></div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default"
												data-dismiss="modal">关闭</button>
											<button type="button" class="btn btn-primary" id="list-save"
												style="margin-right: 10%;">确定</button>
										</div>
									</div>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- Older IE Message -->
		<!--[if lt IE 9]>
    <div class="ie-block">
        <h1 class="Ops">抱歉！</h1>
        <p>您正在使用一个过时的Internet Explorer版本，升级到以下任何Web浏览器，以便访问该网站的最大功能。 </p>
        <ul class="browsers">
            <li>
                <a href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html">
                    <img src="img/browsers/chrome.png" alt="">
                    <div>Google Chrome</div>
                </a>
            </li>
            <li>
                <a href="http://www.firefox.com.cn/">
                    <img src="img/browsers/firefox.png" alt="">
                    <div>Mozilla Firefox</div>
                </a>
            </li>
            <li>
                <a href="http://www.oupeng.com/download">
                    <img src="img/browsers/opera.png" alt="">
                    <div>Opera</div>
                </a>
            </li>
            <li>
                <a href="https://www.apple.com/cn/safari/">
                    <img src="img/browsers/safari.png" alt="">
                    <div>Safari</div>
                </a>
            </li>
            <li>
                <a href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads">
                    <img src="img/browsers/ie.png" alt="">
                    <div>Internet Explorer(New)</div>
                </a>
            </li>
        </ul>
        <p>升级你的浏览器更安全和更快的网络体验。 <br/>感谢你的支持...</p>
    </div>
    <![endif]-->
	</section>
</body>
</html>
<!-- jQuery -->
<script src="js/jQuery/jquery.min.js"></script>
<!-- jQuery Library -->
<!-- Bootstrap -->
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- Bootstrap-table -->
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>
<script src="js/bootstrap/bootstrap-table-export.js"></script>
<script src="js/bootstrap/tableExport.js"></script>
<script src="js/functions.js"></script>
<script src="customjs/changeBackground.js"></script>
<script src="customjs/sidebar.js"></script>
<!--<script src="js/jQuery/jquery.jedate.js"></script>-->
<script src="js/echarts/echarts.min.js"></script>
<script src="js/echarts/theme/macarons.js"></script>
<script src="customjs/echartUtil/data.format.js"></script>
<script src="customjs/echartUtil/echart.util.js"></script>
<script src="customjs/draw.js"></script>
<script src="customjs/bsTable/kpitable.js"></script>
<script>
	$(function(){
		var selectRow = window.location.href.split("?")[1].split("&")[0].split("=")[1]-0,
			selectDataId = window.location.href.split("?")[1].split("&")[1].split("=")[1]-0;


		function temp2(){
			var obPointkpi = {
				clickTableRow:function(row,element){
					$(".tabRowClickbg").removeClass("tabRowClickbg");
					$(element).addClass("tabRowClickbg");
					$("#userSidekpi").bootstrapTable("showLoading");
					$("#serverSidekpi").bootstrapTable("showLoading");
					$(".fixed-table-loading").css("line-height",$(".fixed-table-loading").height()+"px");
					$.ajax({
						url:"commonController/getNpmListRrdData.do",
						type:"post",
						data:{
							"moduleId":11,
							"watchPointId":row.id,
							"starttime":1505892630,
							"endtime":1505960881
						},
						dataType:"json",
						success:function(data){
							$("#userSidekpi").bootstrapTable("hideLoading");
							$("#userSidekpi").bootstrapTable("load",data);
						}
					});
					$.ajax({
						url:"commonController/getNpmListRrdData.do",
						type:"post",
						data:{
							"moduleId":12,
							"watchPointId":row.id,
							"starttime":1505892630,
							"endtime":1505960881
						},
						dataType:"json",
						success:function(data){
							$("#serverSidekpi").bootstrapTable("hideLoading");
							$("#serverSidekpi").bootstrapTable("load",data);
						}
					})
				},
				modulkpi:function(userColumnurl,modolkpiurl,tableId,ajaxData){
					$.ajax({
						url:userColumnurl,
						type:"post",
						data:"",
						dataType:"json",
						success:function(data){
							var columnsArry = [];
							data.forEach(function(title){
								if(title.columnen!="id"){
									var colObjet = {
										field:title.columnen,
										title:title.columnzh+"<span data-columnId='"+title.id+"'></span>",
										sortable:true,
										visible:title.checked
									};
									columnsArry.push(colObjet);
								}
							});
							$(tableId).bootstrapTable({
								url:modolkpiurl,
								queryParams:function(params){
									return ajaxData;
								},
								toggle:"table",
								pagination:true,
								showColumns:true,
								showExport:true,
								search:true,
								columns:columnsArry,
								onClickRow:function(row,element){
									if(tableId=="#table7"){
										obPointkpi.clickTableRow(row,element);
										selectDataId = row.id;
										_chart._createChart(10,selectDataId);
									}
								},
								onColumnSwitch:function(field, checked	){
									$.ajax({
										url:userColumnurl,
										type:"post",
										data:"",
										dataType:"json",
										success:function(culumnData){
											culumnData.forEach(function(item,index){
												if(item.columnen==field){
													$.ajax({
														url:checked?"userConfigure/checkedUserListColumn.do":
																"userConfigure/unCheckedUserListColumn.do",
														type:"post",
														data:{columnId:item.id},
														dataType:"text",
														success:function(data){
														}
													})
												}
											})
										}
									})
								},
								rowStyle:function(row,index){
									if(index==selectRow){
										if(tableId=="#table7"){
											return {classes:"tabRowClickbg"}
										}
									}
									return "";
								},
								onLoadSuccess:function(data){
									if(selectRow>9){
										$("#table7").bootstrapTable('selectPage', Math.ceil((selectRow+1)/10));
									}
								}
							});
						}
					});
				}
			};
		}



		/*-------用户刚刚进入此页面时触发的事件------------------*/
//		,watchPointId,moduleId,starttime,endtime

			obPointkpi.modulkpi("/watchpointController/getWatchpointUserListColumn.do",
				"/commonController/getNpmListRrdData.do",
				"#table7",
					{
						"moduleId":10,
						"watchPointId":selectDataId,
						"starttime":1505892630,
						"endtime":1505960881
					},selectRow,selectDataId,1,selectRow);//观察点
		obPointkpi.modulkpi("/client/getClientUserListColumn.do",
				"/commonController/getNpmListRrdData.do",
				"#userSidekpi",
				{
					"moduleId":11,
					"watchPointId":selectDataId,
					"starttime":1505892630,
					"endtime":1505960881
				},selectRow,selectDataId);//用户端
		obPointkpi.modulkpi("/serverManagement/getServerSideUserListColumn.do",
				"/commonController/getNpmListRrdData.do",
				"#serverSidekpi",
				{
					"moduleId":12,
					"watchPointId":selectDataId,
					"starttime":1505892630,
					"endtime":1505960881
				},selectRow,selectDataId);//服务端




		function temp(){
			$.ajax({
				url:"/serverManagement/getServerSideUserListColumn.do",
				type:"post",
				data:"",
				dataType:"json",
				success:function(data){
					var columnsArry = [];
					data.forEach(function(title){
						if(title.columnen!="id"){
							var colObjet = {
								field:title.columnen,
								title:title.columnzh+"<span data-columnId='"+title.id+"'></span>",
								sortable:true,
								visible:title.checked
							};
							columnsArry.push(colObjet);
						}
					});
//				console.log(columnsArry);
					$("#serverSidekpi").bootstrapTable({
						url:"/commonController/getNpmListRrdData.do",
						queryParams:function(params){
							return {
								"moduleId":12,
								"watchPointId":selectDataId,
								"starttime":1505892630,
								"endtime":1505960881
							}
						},
						toggle:"table",
						pagination:true,
						showColumns:true,
						showExport:true,
						search:true,
						columns:columnsArry,
						/*onClickRow:function(row,element){
						 if(tableId=="#table7"){
						 obPointkpi.clickTableRow(row,element);
						 selectDataId = row.id;
						 _chart._createChart(10,selectDataId);
						 }
						 },
						 onColumnSwitch:function(field, checked	){
						 $.ajax({
						 url:"/serverManagement/getServerSideUserListColumn.do",
						 type:"post",
						 data:"",
						 dataType:"json",
						 success:function(culumnData){
						 culumnData.forEach(function(item,index){
						 if(item.columnen==field){
						 $.ajax({
						 url:checked?"userConfigure/checkedUserListColumn.do":
						 "userConfigure/unCheckedUserListColumn.do",
						 type:"post",
						 data:{columnId:item.id},
						 dataType:"text",
						 success:function(data){
						 }
						 })
						 }
						 })
						 }
						 })
						 }*//*,
						 rowStyle:function(row,index){
						 if(index==selectRow){
						 if("#serverSidekpi"=="#table7"){
						 return {classes:"tabRowClickbg"}
						 }
						 }
						 return "";
						 },
						 onLoadSuccess:function(data){
						 if(selectRow>9){
						 $("#table7").bootstrapTable('selectPage', Math.ceil((selectRow+1)/10));
						 }
						 }*/
					});
				}
			});
		}




























		_chart._createChart(10,selectDataId);
		$("#list-draw").off("click").on("click",function(){
			_chart._kpiSelectM(10);
		});
		$("#list-save").click(function(){
			_chart._saveJson(10,selectDataId);
		});
		$(window).resize(function(){
			_chart._resizChart();
		});
	});
</script>

